<script setup lang="ts">
import { ref } from 'vue'
import { indexApi } from '@/services/index'
import type { CreativesInnerType } from '@/services/type'
const raderData = ref<CreativesInnerType[] | undefined>([])
const title = ref<string | undefined>('')

interface Props {
  title: string
  raderData: CreativesInnerType[]
}
const prop = defineProps<Props>()
indexApi().then((res)=>{
  title.value = res.data.blocks[4].uiElement?.subTitle.title
  raderData.value = res.data.blocks[4].creatives
})
// uni.request({
//   url: 'https://zyxcl.xyz/music/api/homepage/block/page',
//   success: (res) => {
//     console.log(res.data)
//     title.value = res.data.data.blocks[4].uiElement.subTitle.title
//     console.log(title.value)
//     raderData.value = res.data.data.blocks[4].creatives
//     console.log(raderData.value)
//   }
// })

// 跳转歌单
const goSonglist = (id: string) => {
  uni.navigateTo({
    url: `/pages/songlist/songlist?id=${id}`
  })
}
</script>

<template>
  <view class="recommandSongList">
    <uni-section :title="prop.title" type="line">
      <view class="line2" scroll-x="true">
        <view class="item" v-for="(item,index) in prop.raderData" :key="index" @click="goSonglist(item.creativeId)">
          <image :src="item.uiElement?.image?.imageUrl"></image>
          <view class="word">{{ item.uiElement?.mainTitle?.title }}</view>
        </view>
    </view>
    </uni-section>
  </view>
</template>

<style scoped lang="scss">
.line2::-webkit-scrollbar{
  display: none;
}
.line2{
  display: flex;
  height: 360rpx;
  padding: 30rpx;
  overflow-x: scroll;
  .item{
    width: 240rpx;
    flex-shrink: 0;
    margin-right: 10rpx;
    display: flex;
    flex-direction: column;
      image{
        width: 240rpx;
        height: 240rpx;
      }
      .word{
        font-size: 28rpx;
      }
    }
  }
</style>